--- layout: post title: Using jupyter notebooks with plotly graphs in a jekyll blog subtitle: Sample Indian States map render plotly graphs inside your jekyll blog using jupyter notebook tags: [plotly,python,jupyter,jekyll] --- plotly_map
In [34]:
from IPython.display import display
from IPython.display import HTML
import IPython.core.display as di # Example: di.display_html('<h3>%s:</h3>' % str, raw=True)

# This line will hide code by default when the notebook is exported as HTML
di.display_html('<script>jQuery(function() {if (jQuery("body.notebook_app").length == 0) { jQuery(".input_area").toggle(); jQuery(".prompt").toggle();}});</script>', raw=True)
In [1]:
#hide
from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
from plotly.graph_objs import Scatter, Figure, Layout
import plotly
import plotly.graph_objs as go
init_notebook_mode(connected=False)
import json
import numpy as np
import pandas as pd
In [2]:
#hide
import geopandas as gpd
In [32]:
#hide
gdf = gpd.read_file('states_india.shp')
In [5]:
with open('states_india_1.json') as response:
    india = json.load(response)
In [24]:
fig = go.Figure(go.Choroplethmapbox(geojson=india, locations=gdf['st_nm'], z=gdf['state_code'],featureidkey="properties.st_nm",
                                    colorscale="Viridis", zmin=0, zmax=25,
                                    marker_opacity=0.5, marker_line_width=1))
fig.update_layout(mapbox_style="carto-positron",
                  mapbox_zoom=3.5,mapbox_center = {"lat":23.537876 , "lon": 78.292142} ) 
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})
fig.show()
In [25]:
#hide
front_matter_str = """---
layout: post
title: Using jupyter notebooks with plotly graphs in a jekyll blog
subtitle: Sample Indian States map render plotly graphs inside your jekyll blog using jupyter notebook
tags: [plotly,python,jupyter,jekyll]
---"""
In [35]:
import subprocess

def conv_nb_jekyll(filename,front_matter):
    
    """
    this function will convert your jupyter notebook to html and 
    prepend the front matter string you provide to the top of the resulting html file
    
    Args:
        filename: filename of input jupyter notebook (.ipynb file)
        front_matter: python formatted string resembling YAML jekyll front matter
    Returns:
        jekyll_html_post: location of final html file to post on your jekyll blog
    """
    
    #convert jupyter notebook to html
    subprocess.call(["jupyter", "nbconvert","--to","html","--template","full",filename])
            
    #function that will prepend given string to given filename
    def prepend_string(filename, string):
        with open(filename, 'r+') as f:
            content = f.read()
            f.seek(0, 0)
            f.write(string.rstrip('\r\n') + '\n' + content)
            
    #call function to prepend front matter to the file 
    html_file = filename.replace('.ipynb','.html')
    prepend_string(html_file,front_matter)
    #print('converted html file at: ',html_file)

    return html_file
        


jekyll_html_post = conv_nb_jekyll(filename='plotly_map.ipynb',front_matter=front_matter_str)